import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../../conf/m3.dart';
import '../../../widgets/app_widgets.dart';

class AlignPage extends PageWithTitle {
  const AlignPage() : super("对齐组件(Align、Center)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("对齐组件，用于设置子组件在父组件中的对齐位置（等同于Android gravity）"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("Align"),
      LabelText("- alignment，对齐方式，在Flutter中，对齐有三种子类"),
      LabelText("  - Alignment，设置组件的左右对齐、上下对齐，数值区间[-1,1]，0表示居中，"
          "已经内置九个方位的对齐实例"),
      LabelText("  - AlignmentDirectional，支持布局方向的对齐设置，也是内置9个方向的对齐"
          "实例"),
      LabelText("  - FractionalOffset，等比偏移，按比例在对齐组件中寻找对齐中心，将子组件"
          "中心与其对齐（子组件是不可超出父组件的，对齐时超出边界会被修正）"),
      LabelText("- heightFactor，子组件有具体高度时，对齐组件以子组件高度倍数设置自身高度，"
          "为空则由父组件和子组件大小来决定"),
      LabelText("- widthFactor，子组件有具体宽度时，对齐组件以子组件宽度倍数设置自身宽度"),
      AppSpacer.large,
      _CenterExample(),
      AppSpacer.mini,
      UlItem("Center"),
      BodyText("Center是Align的子类，用于快速实现居中对齐，嵌套即可实现"),
    ];
  }
}

class _CenterExample extends StatelessWidget {
  const _CenterExample();

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surfaceContainer,
        borderRadius: M3.connerRadiusMedium,
      ),
      child: Center(
        child: Container(
          width: 100,
          height: 40,
          color: Theme.of(context).primaryColor,
        ),
      ),
    );
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surfaceContainer,
            borderRadius: M3.connerRadiusMedium,
          ),
          child: Align(
            alignment: Alignment.center,
            child: Container(
              width: 100,
              height: 40,
              color: Theme.of(context).primaryColor,
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surfaceContainer,
            borderRadius: M3.connerRadiusMedium,
          ),
          child: Align(
            alignment: AlignmentDirectional.bottomEnd,
            heightFactor: 2,
            child: Container(
              width: 100,
              height: 40,
              color: Theme.of(context).primaryColor,
            ),
          ),
        ),
        AppSpacer.mini,
        Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surfaceContainer,
            borderRadius: M3.connerRadiusMedium,
          ),
          child: Align(
            alignment: const FractionalOffset(0.3, 0.3),
            heightFactor: 2,
            widthFactor: 2,
            child: Container(
              width: 100,
              height: 40,
              color: Theme.of(context).primaryColor,
            ),
          ),
        ),
      ],
    );
  }
}
